<div class="mt-3">

    <table class="table table-bordered text-nowrap bg-light zero3-list-table">
        <thead class="sticky-top" style="top: 42px; z-index: 9">
        <tr class="text-center table-primary">
            <th scope="col" (click)="head.tr.selectedAll.click($event)">
                <fa-icon [icon]="head.tr.selectedAll.icon"></fa-icon>
            </th>
            <th scope="col"><span>专区类型</span></th>
            <th scope="col"><span>编号</span></th>
            <th scope="col"><span>名称（中文）</span></th>
            <th scope="col"><span>名称（英文）</span></th>
            <th scope="col"><span>名称（背景图片）</span></th>
            <th scope="col"><span>图片</span></th>
            <th scope="col"><span>商品名称</span></th>
            <th scope="col"><span>商品价格</span></th>
            <th scope="col"><span>排序号</span></th>
            <th scope="col"><span (click)="head.serMemo.sort($event)">
                {{head.serMemo.name}}
                <ng-container *ngIf="head.serMemo.icon !== null">
                    <fa-icon [icon]="head.serMemo.icon"></fa-icon>
                    {{head.serMemo.orderOrder}}
                </ng-container>
            </span></th>
            <th scope="col"><span>创建者</span></th>
            <th scope="col"><span (click)="head.createTime.sort($event)">
                {{head.createTime.name}}
                <ng-container *ngIf="head.createTime.icon !== null">
                    <fa-icon [icon]="head.createTime.icon"></fa-icon>
                    {{head.createTime.orderOrder}}
                </ng-container>
            </span></th>
            <th scope="col"><span>最后修改者</span></th>
            <th scope="col"><span>最后修改时间</span></th>
        </tr>
        </thead>
        <tbody>
        <ng-container *ngFor="let item of data?.page?.content; let i = index">
            <tr (click)="body.tr.click($event, item?.uuid)" tooltip="{{item?.serNum}} | {{item?.serName}}"
                (dblclick)="body.tr.dbclick($event, item?.uuid)"
                [ngClass]="{'row-selected': body.tr.isSelected(item?.uuid)}">
                <th scope="row" class="text-center">{{i + 1}}</th>
                <td>{{item?.zoneType?.serName}}</td>
                <td>{{item?.serNum}}</td>
                <td>{{item?.serName}}</td>
                <td>{{item?.serNameEn}}</td>
                <td class="text-center">
                    <ng-container *ngIf="item?.serNameBgImgUrl?.length > 0">
                        <img [src]="item.serNameBgImgUrl" style="max-width: 3rem; max-height: 1rem;">
                    </ng-container>
                </td>
                <td class="text-center">
                    <ng-container *ngIf="item?.serImgUrl?.length > 0">
                        <img [src]="item.serImgUrl" style="max-width: 3rem; max-height: 1rem;">
                    </ng-container>
                </td>
                <td>{{item?.serGoodsName}}</td>
                <td>{{item?.serGoodsPrice}}</td>
                <td>{{item?.serSortNumber}}</td>
                <td>{{item?.serMemo}}</td>
                <td>{{item?.creator}}</td>
                <td>{{item?.createTime}}</td>
                <td>{{item?.lastModifier}}</td>
                <td>{{item?.lastModifyTime}}</td>
            </tr>
        </ng-container>
        </tbody>
    </table>

</div>

<app-zero3-list-page [table]="this"></app-zero3-list-page>
